<template>
  <!-- 虚线 和大小问题未解决 -->
  <f7-page class="row">
    <qm-currentcy-navbar title="弹框">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <f7-card><f7-button @click="take">点击我弹出弹出框1(js)</f7-button></f7-card>
    <f7-card><f7-button @click="take2">点击我弹出弹出框2</f7-button></f7-card>
    <f7-card><f7-button @click="take3">点击我弹出弹出框3</f7-button></f7-card>
    <f7-card><f7-button @click="take4">点击我弹出弹出框4</f7-button></f7-card>
    <f7-card>
      <f7-button class="col" @click="$refs.actionsOneGroup2.open()">底部弹出</f7-button>
    </f7-card>
    <f7-card><f7-button @click="take5">点击我弹出弹出框6</f7-button></f7-card>
    <f7-card><f7-button @click="take7">弹出支付宝支付</f7-button></f7-card>
    <!-- 第二个弹窗 -->
    <qm-dialog
      v-model="show2"
      confirm-button-color="#1677FF"
      messageAlign="center"
      confirmButtonText="我知道了"
      title="标题"
      message='告知当前状态，信息和解决方法'
    >
    </qm-dialog>
    <!-- 第三个弹窗 -->
    <van-dialog
      v-model="show3"
      confirm-button-color="#1677FF"
      confirmButtonText="我知道了"
    >
    <template #title>
      <img src="" alt="" class="myimg" />
        <div class="title">标题单行</div>
    </template>
      <template #default>
        <div class="mydiv">说明当前状态提示用户解决方案最好不要超过两行。</div>
      </template>
    </van-dialog>
    <!-- 第四个 -->
    <van-dialog v-model="show4" confirmButtonColor="#3385FF" showCancelButton>
      <template #title>
        <div class="title">标题单行</div>
      </template>
      <template #default>
        <h5 class="mydiv2">标题单行标题单行</h5>
        <div class="mydiv2">
          说明当前状态、提示用户解决方案最好不要超过两行。说明当前状态、提示用户解决方案最好不要超过两行。说明当前状态、提示用户解决方
        </div>
        <h5 class="mydiv2">标题单行标题单行</h5>
        <div class="mydiv2">
          说明当前状态、提示用户解决方案最好不要超过两行。说明当前状态、提示用户解决方案最好不要超过两行。说明当前状态、提示用户解决方
        </div>
      </template>
    </van-dialog>

    <!-- 第五个弹窗 -->
    <f7-actions ref="actionsOneGroup2" class="actions">
      <f7-actions-group>
        <f7-actions-label class="label">
          <div>
            <p class="title"><b>标题</b></p>
            <p>告知当前状态，信息和解决方案</p>
          </div>
        </f7-actions-label>
        <f7-actions-button color="#3385FF">我知道了</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
    <!-- 第六个 -->
    <van-dialog v-model="show5" confirmButtonColor="#3385FF" showCancelButton>
       <template #title>
           <div class="title">已添加到桌面</div>
      </template>
      <template #default>
        <div class="mydiv">
          说明当前状态、提示用户解决方案最好不要超过两行。
        </div>
        <div class="custom">自定义组件区</div>
      </template>
    </van-dialog>

    <!-- 支付宝弹窗 -->
    <qm-overlay :show="show7" @click="show7 = false">
      <template>
        <div class="wrapper" @click.stop>
          <div class="block">
            <!-- 关闭符号 -->
            <img src="static/img/feedback/open.svg" alt="" class="icon">
            <div>
              <img
                src="static/img/feedback/zfb.svg"
                alt=""
                width="43px"
                height="43px"
              />
              <div class="zfbtitle">
                <div>请尽快完善身份信息 <br />以免影响您使用余额付款</div>
              </div>
              <div class="mypopup">
                根据《非银行支付机构网络支付业务络支付业务管理办法》的要求，自然年内余额付款额度超过10万元需要满足5个可信渠道的身份验证。
              </div>
              <div class="popupfooter">
                <div class="popupxitle">
                  <strong>完善后可享受以下权益</strong>
                </div>
                <ul class="popupbody" style="list-style: revert">
                  <li>余额付款额度提升至20万/年</li>
                  <li>可使用余额购买理财产品</li>
                </ul>
                <div class="popupbutton">
                  <f7-button raised fill round class="zfb-button">上传证件照片</f7-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 关闭符号 -->
          <div>
            <img
              src="static/img/feedback/close.png"
              alt=""
              width="25px"
              height="25px"
              class="openimg"
              @click="show7 = false"
            />
          </div>
        </div>
      </template>
    </qm-overlay>
    <!----------------------------- -->
    <!-- 提示信息 -->

    <f7-card><f7-button @click="tips">弹出警告</f7-button></f7-card>
    <f7-card><f7-button @click="tips2">操作成功</f7-button></f7-card>
    <f7-card><f7-button @click="tips3">失败提示</f7-button></f7-card>
    <f7-card><f7-button @click="tips4">加载中</f7-button></f7-card>
    <f7-card><f7-button @click="tips5">最少字符</f7-button></f7-card>

    <!--  -->
    <f7-card><f7-button @click="tips6"> 使用JS来弹出弹出框 </f7-button></f7-card>
  </f7-page>
</template>

<script>
import qmDialog from "../../../libs/ui/component/qm-dialog.vue";
import qmOverlay from "../../../libs/ui/component/qm-overlay.vue";
export default {
  components: {
    qmDialog,
    qmOverlay,
  },
  data() {
    return {
      actionsOneGroup: "false",
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
    };
  },
  methods: {
    take() {
      this.$f7.dialog.alert(
        "说明当前状态提示用户解决方案最好不要超过两行。",
        () => {
          console.log("页面显示了");
        }
      );
    },
    take2() {
      this.show2 = true;
    },
    take3() {
      this.show3 = true;
    },
    take4() {
      this.show4 = true;
    },
    take5() {
      this.show5 = true;
    },
    take6() {
      this.show6 = true;
    },
    take7() {
      this.show7 = true;
    },
    tips() {
      let tips1 = vue.$f7.toast.create({
        icon: `<i class="f7-icons">exclamationmark</i>`,
        text: "警示信息",
        position: "center",
        cssClass:'qm-toast',
        closeTimeout: 2000,
      });
      tips1.open();
    },
    tips2() {
      let tips2 = vue.$f7.toast.create({
        icon: `<img src="static/img/feedback/success.svg" alt="" width="40px" height="40px">`,
        text: "操作成功",
        position: "center",
        cssClass:'qm-toast',
        closeTimeout: 2000,
      });
      tips2.open();
    },
    tips3() {
      let tips3 = vue.$f7.toast.create({
        icon: `<i class="f7-icons">multiply</i>`,
        text: "操作失败",
        cssClass:'qm-toast',
        position: "center",
        closeTimeout: 2000,
      });
      tips3.open();
    },
    tips4() {
      let tips4 = vue.$f7.toast.create({
        icon: `<i class="f7-icons">rays</i>`,
        text: "加载中",
        cssClass:'qm-toast',
        position: "center",
        closeTimeout: 2000,
      });
      tips4.open();
    },
    tips5() {
      let tips5 = vue.$f7.toast.create({
        text: "最少字符",
        position: "center",
        cssClass:'qm-toast',
        closeTimeout: 2000,
      });
      tips5.open();
    },
    tips6() {
      this.$f7.dialog.confirm("nihao", () => {
        console.log('js弹出框弹出了');
      });
    },
  },
};
</script>

<style lang="less" scoped>

.actions {
  --f7-actions-button-text-align: center;
  --f7-actions-button-height: 40.32px;
  --f7-actions-label-font-size: calc(30px * var(--ratio));
  --f7-actions-button-font-size: calc(36px * var(--ratio));
  --f7-actions-button-height: 40.32px;
  --f7-actions-label-justify-content: center;
  --f7-actions-button-border-color: #e9ecf0;
}
.label {
  --f7-actions-label-text-color: var(--color-text-title);
  --f7-actions-label-font-size: calc(36px * var(--ratio));
  --f7-actions-label-justify-content: center;
  --f7-actions-label-padding: 4px 10px;
}
.title {
  color: var(--color-text-title);
  font-size: calc(36px * var(--ratio));
  font-weight: 550;
  margin-bottom: calc(16px * var(--ratio));
  // font-size: 30px;
}

// 弹出框
.dialog-title {
  font-size: 50px;
}
.mydiv {
  margin: 0px calc(44px * var(--ratio)) calc(40px * var(--ratio));
  color: var(--color-text-title);
  font-size: calc(30px * var(--ratio));
  text-align: center;
}
.mydiv2 {
  margin: 10px calc(40px * var(--ratio)) 10px ;
  color: var(--color-text-title);
  font-size: calc(30px * var(--ratio));
  text-align: left;
}
/deep/ .van-dialog {
  border-radius: 8px;
}
.myimg {
  margin-top: 20px;
  width: 100px;
  height: 100px;
}
.custom {
  background-color: #ff00004c;
  color: #D0021B;
  margin: 10px 7px;
  text-align: center;
  height: calc(72px * var(--ratio));
  line-height: calc(72px * var(--ratio));
}
.icon {
  --f7-theme-color: #9ea7b7;
  font-size: 2px;
  margin-left: 97%;
  margin-top: 12px;
  height: 12px;
}
.mypopup {
  margin: 8px 0px 20px;
  text-align: left;
  color: var(--color-text-title);
  font-weight: 400;
  font-size: calc(30px * var(--ratio));
}
.popupfooter {
  border-top: 1px #e9ecf0 solid;
  padding-top: 10px;
  color: #9ea7b7;
  text-align: left;
}
.popupxitle {
  margin-bottom: 6px;
  font-family: Medium;
  font-size: calc(30px * var(--ratio));
}
.popupbody {
  font-family: Regular;
  margin-left: 18px;
  font-size: calc(30px * var(--ratio));
}
.popupbutton {
  text-align: center;
  text-indent: 5px;
  margin: 38px 9.5px 15px;
  --f7-button-pressed-bg-color: var(--color-brand);
  width: 228px;
  height: 40px;
  .qm-button{
    box-shadow:#ffff
  }
}
// /deep/.van-overlay{
// position: relative;
// }
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.zfbtitle{
  color: var(--color-text-title);
  font-size: var(--font-size-maintitle);
  font-weight: 500;
}
.zfb-button{
  height: calc(69px * var(--ratio));
  font-size: 15px;
  line-height: calc(69px * var(--ratio));
  margin-bottom: 20px;
  --f7-button-raised-box-shadow:#ffff;
}
// // 修改遮罩层的颜色
// /deel/ .van-overlay{
// background-color:#000000;
// }
.block {
  width: 268px;
  background-color: #ffff;
  text-align: center;
  border-radius: 6px;
  --f7-block-margin-vertical: 25px;
}
.f7-link {
  color: black;
}
.openimg{
  width: 30px;
  height: 30px;
}
</style>
